<template>
	<view>
		<view class="tabs">
			<u-tabs @click="clickNav" :list="lisTag" lineWidth="30" lineColor="#5288F5" :activeStyle="{
		            color: '#333',
		            fontWeight: 'bold',
		            transform: 'scale(1.08)'
		        }" :inactiveStyle="{
		            color: '#606266',
		            transform: 'scale(1)'
		        }" itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;">
			</u-tabs>
		</view>
		<!-- 		<u-empty v-if="!dataList.length" mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png">
		</u-empty> -->
		<view class="nonePic" v-if="display|| !dataList.length">
			<image class="img" mode="aspectFill" src="../../static/image/none.png"></image>
			<text>暂无发帖</text>
		</view>
		<view v-else>
			<view class="loadstate" v-if="loadstate">
				<u-skeleton rows="4" title loading :animate="true"></u-skeleton>
			</view>
			<view class="content">
				<view class="item" v-for="item in dataList">
					<!-- 这里换成:item="item也可以" -->
					<post class="list" :item="item"></post>
				</view>
			</view>
			<view class="none">
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				lisTag: [{
					name: "最新",
					type: "publish_date"
				}, {
					name: "热门",
					type: "view_count"
				}],
				loadstate: true,
				urlback: "getLimitMyPosts",
				dataList: [],
				obj: {
					pageSize: 5,
					stateIndex: 0,
					uid: ""
				},
				nowPage: 0,
				likeList: [],
				display: false
			};
		},
		onShow() { //每次打开页面都会调用一次，onLoad只加载一次
			console.log("进入myPost");
			this.init(); //每次进入都要初始化
			this.getLikeData();
			this.getData(this.urlback);
		},
		onReachBottom() {
			console.log("到底部了");
			this.nowPage++;
			this.obj.stateIndex = this.nowPage * this.obj.pageSize;
			this.getData(this.urlback);
		},
		methods: {
			init() { //初始化
				this.dataList = [];
				this.nowPage = 0;
				//
				this.obj.stateIndex = 0;
				this.obj.pageSize = 5;
				uni.getStorage({
					key: "userInfo",
					success: (res) => {
						this.obj.uid = res.data.id;
						// console.log("缓存取用户数据:", res);
					}
				})
			},
			//从数据库中获取信息
			getData(urlback) {
				uni.request({
					url: this.$e.Url + "/user/" + urlback,
					data: this.obj,
					header: {
						"Content-Type": "application/json"
					},
					method: 'POST',
					success: (res) => {
						console.log("请求API接口【/user/" + this.urlback + "】", res);
						for (let index = 0; index < res.data.length; index++) {
							res.data[index].picsUrl = JSON.parse(res.data[index].picsUrl); //解析成JSON
							res.data[index].like = false;
							for (let i = 0; i < this.likeList.length; i++) { //注意数组越界艹
								// res.data[index].like = false;
								if (res.data[index].id == this.likeList[i].postid) {
									res.data[index].like = true;
								}
							}
						}
						this.dataList = [...this.dataList, ...res.data]; //ES6写法
						if (!this.dataList.length) {
							this.display = true;
						}
						this.loadstate = false;
						// console.log("dataList:", this.dataList);
					}
				})
			},
			getLikeData() {
				uni.getStorage({
					key: "userInfo",
					success: (res) => {
						// console.log("缓存数据:", res.data);
						uni.request({
							url: this.$e.Url + "/user/getUserAllLikePosts",
							data: {
								id: res.data.id
							},
							header: {
								"Content-Type": "application/json"
							},
							method: "POST",
							success: (ans) => {
								console.log("请求API接口【/user/getUserAllLikePosts】", ans);
								this.likeList = ans.data;
								// console.log("this.likeList:", this.likeList);
							}
						});
					}
				})
			},
			clickNav(e) {
				// console.log(e)
				this.loadstate = true; //加载动画开启
				this.urlback = (e.index == 0 ? "getLimitMyPosts" : "getLimitMyHotPosts");
				this.init(); //重置
				this.getData(this.urlback);
			},
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-image: url("/static//userbackground.jpg");
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center center;
	}

	.tabs {
		margin-bottom: 30rpx;
	}

	.nonePic {
		margin: 0 auto;
		width: 300rpx;
		height: 300rpx;

		.img {
			width: 100%;
			height: 100%;
		}

		text {
			@include flex-box-set();
			color: $text-font-color-3;
		}
	}

	.loadstate {
		padding: 30rpx;
	}

	.content {
		.item {
			padding: 10rpx 20rpx;

			.list {
				border-radius: 30rpx;
				background-color: white;
				box-shadow: 20 10 10 10 rgba(0, 0, 0, 0.8);
			}
		}
	}

	.none {
		height: 100rpx;
		// background-color: #000000;
	}
</style>
